 <template>
   <Card :shadow="shadow">
      <div class="card-name">
        <div class="name">新建用户</div>
      </div>
      <div class="content-con">
        <i-form ref="formValidate" :model="formValidate" :rules="ruleValidate" label-position="right" :label-width="110" class="user-item">
          <Form-item label="用户名" prop="name">
            <Row>
              <i-col span="10">
                <i-input v-model="formValidate.name" size="large" placeholder="请输入用户名"></i-input>
              </i-col>
            </Row>
          </Form-item>
          <Form-item label="用户昵称" prop="nickname">
            <Row>
              <i-col span="10">
                <i-input v-model="formValidate.nickname" size="large" placeholder="请输入用户昵称"></i-input>
              </i-col>
            </Row>
          </Form-item>
          <Form-item label="密码" prop="passw">
            <Row>
              <i-col span="10">
                <i-input v-model="formValidate.passw" size="large" placeholder="不修改密码请留空"></i-input>
              </i-col>
              <i-col span="14">
                <span class="user-right">请填写6到12位密码</span>
              </i-col>
            </Row>
          </Form-item>
          <Form-item label="邮箱" prop="email">
            <Row>
              <i-col span="10">
                <i-input v-model="formValidate.email" size="large" placeholder="输入邮箱"></i-input>
              </i-col>
            </Row>
          </Form-item>
          <Form-item label="手机号" prop="phone">
            <Row>
              <i-col span="10">
                <i-input v-model="formValidate.phone" size="large" placeholder="输入手机号"></i-input>
              </i-col>
            </Row>
          </Form-item>
          <Form-item label="超级管理" prop="manage">
            <Row>
              <i-col span="10">
                <Radio-group v-model="formValidate.manage" size="large">
                  <Radio label="yes">
                      <span>是</span>
                  </Radio>
                  <Radio label="no">
                      <span>否</span>
                  </Radio>
                </Radio-group>
              </i-col>
              <i-col span="14">
                <span class="user-right">超管拥有所有菜单权限</span>
              </i-col>
            </Row>
          </Form-item>
          <Form-item label="状态" prop="statu">
            <Radio-group v-model="formValidate.statu" size="large">
              <Radio label="start">
                  <span>启用</span>
              </Radio>
              <Radio label="stop">
                  <span>停止</span>
              </Radio>
            </Radio-group>
          </Form-item>
          <div class="ban-btn">
            <i-button @click="handleSubmit('formValidate')" class="save" size="large">保存</i-button>
            <i-button class="save" size="large" @click="btnClick1">返回</i-button>
          </div>
        </i-form>
      </div>
   </Card>

 </template>
 <script>
 import axios from "../../libs/axios.js";
 export default {
   name: 'user-add',
   props:{
     shadow: {
       type: Boolean,
       default: false
     }
   },
   data() {
     return {
		 formValidate:{
		   name: '',
		   nickname: '',
		   passw: '',
		   email: '',
		   phone: '',
		   manage: '',
		   statu: ''
		 },
		 ruleValidate:{
		   name:[
		     {
		       required: true,
		       message: '请输入用户名',
		       trigger: 'blur'
		     }
		   ],
		   nickname:[
		     {
		       required: true,
		       message: '输入用户昵称',
		       trigger: 'blur'
		     }
		   ],
		   passw:[
		     {
		       required: true,
		       message: '不修改密码请留空',
		       trigger: 'blur'
		     }
		   ],
		   email:[
		     {
		       required: true,
		       message: '输入邮箱',
		       trigger: 'blur'
		     }
		   ],
		   phone:[
		     {
		       required: true,
		       message: '输入手机号',
		       trigger: 'blur'
		     }
		   ],
		   manage:[
		     {
		       required: true,
		       message: '请选择',
		       trigger: 'change'
		     }
		   ],
		   statu:[
		     {
		       required: true,
		       message: '请选择状态',
		       trigger: 'change'
		     }
		   ]
		  }
     };
   },
   methods: {
     // 返回按钮
     btnClick1(){
       this.$router.push({name:'user_management'})
     },
	 //表单验证
	 handleSubmit () {
	   this.$refs['formValidate'].validate((valid) =>{
	     if (valid) {
	       this.$Message.success('提交成功!');
	     } else {
	       this.$Message.error('表单验证失败!');
	     }
	   })
	 }
   }
 };
 </script>
 <style lang="less">
	 .user-item .ivu-form-item-label{
	   font-size: 14px;
	 }
	 .user-right{
	   margin-left: 15px;
	   color: #999;
	   font-size: 14px;
	   height: 36px;
	   line-height: 20px;
	   overflow: hidden;
	   white-space: nowrap;
	   text-overflow: ellipsis;
	   -webkit-box-sizing: border-box;
	   box-sizing: border-box;
	 }
 </style>
